Para aplicar un fondo de color en los títulos de nuestras entradas nos situamos en Plantilla/ Edición de HTML y buscamos lo siguiente:

/* Posts
-----------------------------------------------


Un poco más abajo veremos algo así:

Dentro de ese código añadiríamos: background:#ffffff;
Quedaría más o menos así:

.post h3 {

padding:0 0 4px;
font-size:130%;
font-weight:normal;
line-height:1.4em;
margin:.25em 0 0;
background:#ffffff;
color:$titlecolor;

}


Naturalmente el color (#ffffff;) es como referencia y lo podéis cambiar por el apropiado a vuestro blog.

El resultado sería algo así:


Ahora si deseamos añadir un borde lo haríamos con la propiedad "border" y "color"
Quedaría así:

.post h3 {
padding:0 0 4px;

font-size:130%;
font-weight:normal;
line-height:1.4em;
margin:.25em 0 0;

background:#ffffff;
color:$titlecolor;

border: 1px solid;
color:#660000; }


No daría este efecto:


Si por el contrario no deseáis un color de fondo pero si, una imagen sustituiremos el color del background y en su lugar añadiremos la url de la imagen de esta forma:

.post h3 {
padding:0 0 4px;
font-size:130%;
font-weight:normal;
line-height:1.4em;
margin:.25em 0 0;
background-image: url(Url-de-la-imagen);
color:$titlecolor;
border: 1px solid;
color:#660000; }

¿El efecto?



!Suerte¡
Unknown

Hola Gema he pasado a dejarte un saludito. Un abrazo

Responder
Gem@

Hola Mary, cada vez que te visito me dejas embelesada viendo tus creaciones...
Un abrazo :)

Responder
Unknown

Gracias por tu visita Gemita cariño.
Mira los botones de enlace me los hago yo con el Corel Paint Shop Pro, pero si te gustan y quieres que te haga algo estaré encantada de poderte ayudar ya que tanto me has ayudado tu con tu maravilloso y útil blog.

Responder
RicaConta

Hola, Gema. Subscrevime en blogarithm pero tengo muchas dudas. ¿Crees que es de confianza?
¿Nosotros podemos acceder al listado de personas que veen nuestro blog?
Saluditos

Responder
Anónimo

Gem@ una consulta.Sabes si puedo poner un texto en la side, ojalá con letra mas pequeña que la del resto de mi blog, que pueda ponerle el "siga leyendo" mas una imagen?. Es decir, como si fuera una entrada pero en la side?
un abrazote :)

Responder
Gem@

Hola Cata, el sigue leyendo con el código que aplicamos para el main no lo he intentado aplicar nunca en la sidebar en la sidebar, pero hay más opciones.
Mira esta entrada por si pudiera interesarte:
http://gemablog-.blogspot.com/2007/05/desplegar-y-recoger.html
El tamaño de fuente mira este ejemplo:
<font face="Arial" color="orange" size=1>aquí el texto</font>

El tipo (face) indica el modelo de letra ejemplo "Arial", el color puedes poner el que deseas y el tamaño (size) puede ser "1" o mayor según vayas probando verás el efecto.
;)

Responder
Marta

Hola Gema! sigo pasando de vez en cuando por tu blog. Esta ayudita me ha venido de perlas.
Besos.
Talatí

Responder
Gem@

bicho de contas créeme si te digo que no he tenido tiempo para ver como funciona en realidad blogarithm.
Lo que si sé que funciona de maravilla es http://www.bloglines.com/
Y como bien dices sabes que blogs están suscritos al tuyo.
El portal está en varios idiomas entre ellos español lo podrás ver en la sidebar izquierda.

Saludos Talatí me alegra mucho si ha sido útil ;)

Responder
Gem@

Maryyyyyy que no había visto este comentario antes sorry...
Gracias por todo eres muy amable, ya te he mandado un e-mail.
;) Graciasssssssssss

Responder
Anónimo

Gracias Gema, voy a ver si me animo a intentarlo ahora que estoy con un poco mas de tiempo. Hermoso te quedó el blog con esa imagen de cabecera. Se ve muy limpio el blog, Ganó!!
Saludotes

Responder
CaTa

Hola Gema, intenté poner el código desplegar-y-recoger, pero me sale que tengo un lío con el ID html7 algo así, que está repetido, entonces llegué hasta ahí con el intento.
Lo de las letras funciona genial, puedo poner todo tipo de letras y tamaños.
Un abrazo y espero poder arreglar el asunto.;)

Responder
Gem@

Hola Cata, el código de desplegar y recoger tiene un nombre único, para ser más explicita...
Donde yo escribo UNIQUENAME debes poner cualquier cosa, lo que te venga a la mente, pero debe ser una palabra única que no la tengas en todo el blog de lo contrario te dará ese error.
Como referencia te diré que yo mezclo letras con números, hasta ahora no me ha dado problemas utilizar ese truco ;)

Responder
Unknown

ahhhh, por cierto mi blog es http://archicofradiadelapalma.blogspot.com, date una vueltecita por él y verás que ahora aparece en todas partes el siga leyendo y no hace caso el comando.
dime por favor como poner la botonera a todo lo largo de la página.
dame tu opinión sincera sobre él me lo estoy currando mucho y llevo 3 semanas sin idea ninguna intentando darle forma...

Responder
Gem@

Ya lo he resuelto Jose Carlos, era el script que había dejado de estar en línea :(
He rectificado la entrada y te he contestado aquí:
http://gemablog-.blogspot.com/2007/02/comentarios-recientes-para-blogger-beta_12.html#comment-2324967055701371302
Me parece un trabajo estupendo que estás haciendo, y sobre la botonera... ¿A qué te refieres en concreto a esto?
http://gemablog-.blogspot.com/2007/07/enlaces-tipo-botn-con-cursor.html
Suerte, ya me dirás que tal resulta ;)

Responder
etxe

Hola gema. Gracias por tu blog que me esta siendo de gran ayuda para poder cambiar un poco el aspecto del mio.
Quisiera cambiar el color de toda la columna central donde van los posts no solo de la parte que se explica aquí.
¿me podrias ayudar

Responder
Gem@

Saludos etxe busca en la plantilla lo siguiente:
#main-wrap1 {
width:485px;
float:left;
background:#7369ff;

Debes sustituir #7369ff;por el color que deseas para la columna central :)

Responder
etxe

Muchas gracias Gema tu respuesta además de ser efectiva ha sido muy rápida

Responder
Gem@

!Suerte¡

Responder
paqui

Gem@, aqui te dejo el codigo que he pegado en plantilla para que salga esta imagen en los titulos de pos post, pero no cambia nada, no se que hago mal.

.post h3 {
padding:0 0 4px;
font-size:130%;
font-weight:normal;
line-height:1.4em;
margin:.25em 0 0;
background-image: url(http://www.subirimagen.es/47966/button99017160_jpg.html);
color:$titlecolor;
}

Responder
Gem@

No sale la imagen porque lo que añades es la url de la página donde generas la imagen y debe ser la url de la imagen.
Es esta:
http://www.subirimagen.es/08/0203/47966/button99017160.jpg

Responder
Gem@

http://www.subirimagen.es/08/0203/
47966/button99017160.jpg
(esta creo que si)

Responder
paqui

GEMA, ahora si que la he hecho buena, no se donde he tocado, encima que no me ha salido lo del boton en el titulo de los post, se me ha cambiado todo el titulo de los post que era verde a cambiado, las etiquetas que tambien eran verdes, pues ya no son verdes, mi boton que tenia abajo del todo en el blog ahora esta dbajo de la sidebar.
Bueno un desastre, no se si darle de baja al blog.
Besicos

Responder
Gem@

No le des de baja Paqui. ¿No tienes copia de la plantilla?

Responder
paqui

si Gema justo esa mañana hice una copia, no la he instalado todavia, pero hay cosas que me fallaban como el corrector ortografico.
Gema si por ejemplo hago un blog con todo lo que tengo en este y este le doy de baja y hago otro con estemismo nombre y direccion y vuelvo a pasar todo a este, no tendria problemas verdad? o si?.
Otra cosa e intentado pagar la copia que tengo de este en otro blog y me dice lo siguiente:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Content is not allowed in prolog.

De verdad que no se lo que hago bien.
Gracias, pero la verdad que estoy un poco desesperada

Responder
paqui

Gema si decido hacer otro blog, este que tengo ahora le puedo redireccionar

Responder
paqui

hay alguna forma de pasar todas las entradas o tengo que pasarlas de una en una.
Lo siento son muchas preguntas

Responder
Gem@

Veamos Paqui ¿por qué quieres eliminar este blog y luego volver a añadir todo lo que tienes? ¿por los problemas de los títulos?
Si es por eso solamente podemos intentar solucionarlo antes de tomar medidas más drásticas.
Se puede hacer lo que comentas si, pero las entradas sólo pueden trasladarse manualmente de una en una.
También redireccionar el blog pero si haces eso el contenido será el mismo.

Haz lo siguiente: Guarda una copia de la plantilla tal y como está ahora, debes hacerla situándote en plantilla edición HTML.
Donde dice:Realizar copia de seguridad/Restaurar plantilla clica en "Descargar plantilla completa" y me mandas ese archivo a mi correo.
Intentaré dar con el problema si no lo conseguimos entonces puedes tomar cualquier otra alternativa.;)

Responder
paqui

Gema corazón, bueno te dije que había hecho una copia ese día por la mañana, cuando toco la plantilla me gusta hacerla por si acaso, pues sin estar muy segura de que saliera bien la cargue de nuevo la plantilla que tenia guardada y parece que se han solucionado todos los problemas.
Mil gracias Gema, pero de verdad que me fallaban un montón de cosas del blog y ahora parece que funciona todo.
Puse lo del código del botón en el titulo de los post pero lo quite porque no me gusto como quedaba

Responder
Gem@

Yo lo veo muy bien Paqui, otra cosa que también puedes probar si no te convence el botón es una imagen tipo icono justo a lado de los títulos, algo relacionado con la temática del blog.
-Cada vez que entro a tu blog me quedo pillada por la música, es genial ;)

Responder
Anónimo

Hola Gema, quisiera hacerte una pregunta pero ante todo felicitarte por tu blog que me ha sido de una gran ayuda. Mi pregunta es la siguiente: he conseguido poner fondo de color en los títulos de las entradas, pero como puedo hacerlo en los títulos de la sidebar?
Gracias por tu atención

Responder
Gem@

¿Qué plantilla usas Sisco?

Responder
Anónimo

Uso la minima adaptada a tres columnas una sidebar a cada lado, lo del fondo de color en los títulos ha funcionado,
Gracias por estar ahi

Responder
Gem@

No he podido acceder a tu blog Sisco, sin ver el código de tu sidebar no puedo decirte donde modificarlo. Pero hay una forma muy sencilla de hacerlo ya que podemos añadir a la sidebar cualquier código para decorar un texto.
Mira esta entrada donde dice "Señalar una línea de texto con color" puedes crear esa tabla modificando colores. Agregas ese código en Añadir un elemento de página/HTML/Javascript.
Yo creo que el efecto es similar al de darle color a los títulos, de todas formas si no te resulta bien puedes dejarme la url de tu blog y te seré más precisa ;)

Responder
Anónimo

Buenos dias, el blog al que me refiero lo he creado para una Associación de Padres a la que pertenezco y a lo que me refiero es a dar color de fondo a los títulos, tal y como hice siguiendo tus pasos en los post,
Grácias de nuevo por estar ahí

Responder
Gem@

Está muy bien Sisco, pero todas las plantillas no son iguales y debería saber que plantilla estás usando por si hay que hacer algún añadido extra en la sidebar.

Responder
Anónimo

Hola Gema como te escribia ayer utilizo la Minima (normal) pero le adapte una segunda sidebar a la izquierda, y lo que busco es un parecido a dar fondo de color en los títulos pero de la sidebar,y de paso preguntarte tambien si todos estos titulos se pueden centrar (Titulos de las entradas i de la sidebar)
Gracias y perdona lo pesado que soy.

Responder
Gem@

Ahí van una explicación Sisco para añadir color a los títulos de la sidebar y centrar el texto.
De todas formas como te decía no todas las plantillas son iguales aún tratándose de llamarse igual, me refiero por ejemplo a una Minima original de Blogger y una adaptada.
Busca:
.sidebar h2 {

dentro de ese código debes añadir:
background-color:#666666;
text-align:center;


Si no lo encuentras prueba añadiendo:
.sidebar h2 {
margin: 0;
padding: 1px 5px;
margin-bottom:10px;
background-color:#666666;
text-align:center;
font-size: 90%;
font-weight: bold;
color: #ffffff;
}


(Te estoy dando el código a "ciegas" como orientación así que mira primero en vista previa antes de guardar los cambios)

Eso le dará color a los títulos de la sidebar y centrará el texto.

Para centrar el texto del título de las entradas ve a:
.post h3 {
y añade:
text-align:center;

Responder
Anónimo

Mil grácias, hoy mismo lo intento.
Y aun que sea reiterativo, grácias por estar ahi y por la gran ayuda que nos prestas.

Responder
Gem@

Gracias a ti Sisco por estar ;)

Responder
Anónimo

Funcionó! era lo que buscaba, mil gràcias.
Espero me permitas una nueva pregunta, ¿Se pueden pasar los post de un blog debidamente etiquetados a otro blog con distinta url, y asi poder tenerlos todos etiquetados en un solo blog? (o debo hacerlo a base de copiar y pegar.
No se si me explico,
Gràcias ;)

Responder
Gem@

No hay modo Sisco, lamento que vas a tener que copiar y pegar los post de un blog a otro :(

Responder
Unknown

MUCHAS, MUCHAS, PERO MUCHAS GRACIAS POR TODO GEM@!!!! =D no sabes cuanto te agradezco por lo que haces por nosotros... te deseo lo mejor.. =) =) =)

Responder
Gem@

Gracias a ti Rodrigo por tomarte la molestia de comentar ;)

Responder
Anónimo

Gema, necesito tu ayuda. El problema que se me presenta es que cuando le quiero agregar el color debajo del titulo de la entrada, no me deja. Lo que he notado es que al titulo y al texto, me lo toma como una sola cosa, porque cuando le pongo fondo al texto, tambien le pone fondo al titulo. Me encantaria que me pudieras ayudar, desde ya gracias ^^

Responder
Gem@

Seb estoy intentado acceder a tu blog pero esta noche parece que Blogger hace de las suyas y no me deja.
Quieres añadir el color debajo del título, es decir como fondo de la entrada ¿o te refieres a un borde debajo del título?
Para añadir color al título es en .post h3 si lo deseas como fondo de las entradas es en .post
Esperemos que se solucione este problema y si no déjame la url de tu blog que vea la plantilla porque desde el enlace de tu perfil me da error.

Responder
Anónimo

Quiero añadir el color debajo del titulo como lo tengo en la sidebar y en el footer, velo por ti misma
http://tanperdido.blogspot.com
El error que noto es que me toma el titulo de la entrada como un link, y cuando le puedo agregar el fondo, tambien se lo agrega a todos los demas links, y eso no quiero. Gracias por preocuparte

Responder
Gem@

Mira Seb se ve que modificando algo suprimiste parte de código y añadiste estilos en sitios que no corresponde.Vas a probar lo siguiente...
Busca toda esta parte de código:
/* Posts
-----------------------
h2.date-header {
background-color: #000000;
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #969696;
padding-bottom:1.5em;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
font-size: 12px;
background-color: #44203a;
display:block;
text-decoration:none;
color:#44203a;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
font-size: 12px;
background-color: #44203a;
color:#ffffff;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

La suprimes y en su lugar añades esta:
/* Posts -----------------------------------------------

*/
h2.date-header {
margin: 0;
}

.post {
border:medium none ;
margin:0;
padding-bottom:0;
line-height:1.6em;
}
.post h3 {
font-size:17px;
font-family:georgia;
text-decoration: bold;
line-height:1.4em;
margin:.25em 0 1em 0;
padding:6px 0 0px 25px;
background-color: #44203a;
color:#ffffff;
line-height:1.4em;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#fff;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:#333333;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

La parte que corresponde a .post h3 { es donde van los estilos de el título, tipo de letra y tamaño, color de fondo ect...

La parte de:
.post h3 strong, .post h3 a:hover {
color:#333333;
}
Ahí es el color de letra que se muestra al pasar el ratón por encima.

Debes modificarlo a tu gusto y mirar en vista previa antes de guardar los cambios.
Cualquier cosa ya me dices algo ;)

-Ah, tu perfil no está bien, Blogger tenía problemas anoche pero ahora está bien y sigue dando error de página. Míralo accediendo desde el nombre que dejas en el comentario.

Responder
Anónimo

Decididamente hay algun otro problema, he cambiado todo lo que tu me dijiste, incluso variando algunas cositas, pero lo unico que sigo sin poder hacer es lo que quiero. Es raro, porque le puedo agregar fondo a cualquier otra cosa, menos al titulo, y tampoco puedo cambiarle el tamaño. Gracias por preocuparte Gema

Responder
Anónimo

Inclusive elegi de nuevo la plantilla Minima, y ni siquiera asi me deja hacerlo, lo raro es que en un blog de pruebas que tengo me deja, no se, es muy raro jajajaja

Responder
Gem@

» Si quieres mándame la plantilla a mi correo no te prometo solucionarlo mañana mismo, pero lo haré ;)

Responder
Seb

Al final he podido arreglar el problema.
¿La solución? Cambie el blog de cuenta y luego empeze desde cero, cambiando la plantilla previamente copiada en el bloc de notas.
Gracias de todos modos por acceder a ayudarme Gema.

Responder
Gem@

Vaya, siento no haber llegado a tiempo Seb :S

Responder
Seb

No Gema, esta todo bien, demasiado que te ofreciste :) te espero un dia por mi blog.

Responder
Gem@

Pues allá vamos :P

Responder
Nathan yo

Gema y para que salga solo la parte de abajo dela linea?

Responder
Gem@

yz Para que salga una línea en la parte de abajo añadimos border-bottom:1px solid #666666; ;)

Responder
Nessa

ya esta..Gem@---agregue mas o menos donde me parecia q iba y funciono jaja..fue suerte o quien sabe..pero muy bien quedo.. gracias

Responder
Nessa

jaja q raro..antes deje un comentario y no tomo.. q habra pasado ? XD
bueno solo consultaba algo q ya pude solucionar..
besos

Responder
Gem@

yz Nessa son los duendes de Blogger que hacen travesuras de vez en cuando ;)

Me alegra que todo esté bien :)

Responder
El_Predicador_YO

Buenas denuevo.

Llevo desde que cree mi blog intentando aplicar una imagen de fondo para los titulos de las entradas pero no hay manera. He liedo por todos lados como hacerlo pero nunca se ha hecho efectivo no se porque. Ahora he vuelto a hacerlo paso a paso como explicas y de la manera mas detallada que habia visto hasta ahora pero el resultado es el mismo. Nada.

Por favor, a ver si puedes ayudarme con esto que ya estoy a punto de desistir u_u"

Muchas gracias por todo. Mi blog es http://arcoonte.blogspot.com

Responder
Gem@

:: Prueba a sustituir donde hay puesto:

background titlecolor: url (http://img191.imageshack.us/img191/6053/rojotela.jpg) non-repeat;

por:
background-image: url(http://img191.imageshack.us/img191/6053/rojotela.jpg);

Responder
El_Predicador_YO

... Nop, ya lo probe. Lo que has visto de "titlecolor" es lo que lleva a hacer la desesperacion. He probado a agregar todo lo que se me ocurria, luego a quitarlo, luego a cambiar el orden, el lugar... al final lo copie y pegue en todos ellos pero el resultado es el mismo. Nada.

Muchas gracias por la rapidez y la ayuda... si se te ocurre alguna otra cosa seria de agradecer.

^^

Responder
Bubble

Puedo hacer q se ajuste al final de lo q yo escribi de titulo? o sea, q no ocupe todo el ancho del cuerpo del blog.. se puede?

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top